<template>
  <div id="header" v-show="show">
    <div style="float: left">
      <img src="../../assets/title.jpg" style="width: 45px">
    </div>
    <div id="title">
      Note
    </div>
    <div class="menu" id="search">
      <input placeholder="想搜点什么呢.." class="serach"></input>
      <i class="el-icon-search" style="font-size: medium;"></i>
    </div>
    <div class="menu">
      <router-link to="/collect" class="nav-link"><i class="el-icon-star-off" style="color: magenta"></i>收藏大法</router-link>
    </div>
    <div class="menu">
      <router-link to="/tool" class="nav-link"><i class="el-icon-crop" style="color: orange"></i>开发工具</router-link>
    </div>
    <div class="menu">
      <router-link to="/note" class="nav-link"><i class="el-icon-headset" style="color: crimson"></i>程序人生</router-link>
    </div>
  </div>

</template>

<script>
    export default {
        name: 'topHeader',
        data () {
            return {
                show: true,
            }
        },
        created() {
            this.keywords = this.$route.query.keywords
            /*setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);*/
        },
        mounted: function () {
            // 给页面绑定滑轮滚动事件
            if (document.addEventListener) { // firefox
                document.addEventListener('DOMMouseScroll', this.watchScroll, false)
            }
            // 滚动滑轮触发scrollFunc方法  //ie 谷歌
            window.onmousewheel = document.onmousewheel = this.watchScroll

        },
        methods: {
            watchScroll (e) {
                e = e || window.event;
                console.log("show: " + e.wheelDelta);
                if (e.wheelDelta) {
                    if (e.wheelDelta > 0 && this.show === false) { // 当滑轮向上滚动
                        this.show = true
                    }
                    if (e.wheelDelta < 0 && this.show === true) { // 当滑轮向下滚动
                        this.show = false
                    }
                } else if (e.detail) {
                    if (e.detail < 0 && this.show === false) { // 当滑轮向上滚动
                        this.show = true
                    }
                    if (e.detail > 0 && this.show === true) { // 当滑轮向下滚动
                        this.show = false
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  #header {
    background-color: #fff;
    padding: 10px 60px;
    z-index: 11;
    position: fixed;
    width: 94%;
    top: 0;
    left: 0;
    height: 43px;
    box-shadow: 0 0 1px rgba(0,0,0,.25);
  }

  #title {
    float: left;
    color: #4f4f4f;
    font-weight: 400;
    vertical-align: baseline;
    margin-left: 5px;
    font-size: 26px;
    margin-top: 8px;
  }

  .menu {
    padding-top: 10px;
    float: right;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    padding-bottom: 3px;
    color: #7e8c8d;
    padding-right: 30px;
  }
  .menu i {
    padding-right: 5px;
    font-weight: 600;
  }

  .nav-link {
    text-decoration: none;
    color: #7e8c8d;
  }
  /* 定义正常链接的样式 */
  .nav-link:link {
    color:#7e8c8d;
  }
  /* 定义已访问过链接的样式 */
  .nav-link:visited {
    color:#7e8c8d;
    text-decoration:none;
  }
  /* 定义鼠标悬浮在链接上时的样式 */
  .nav-link:hover {
    color:#2d8cf0;;
    text-decoration:none;
  }
  /* 定义鼠标点击链接时的样式 */
  .nav-link:active {
    color:#2d8cf0;
    text-decoration:none;
  }

  .serach {
    border-bottom: 1px solid #dcdfe6;
    background: #fff;
    width: 200px;
    padding-left: 10px;
    border: none;
    outline: none;
    z-index: 10;
    font-size: 16px;
    color: #333;
  }

  #search {
    border: 1px solid #dcdfe6;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-right: 2px;
  }
</style>

